<template>
	<view class="detail-page">
		<image class="top-image" :src="goodInfo.cover" lazy-load="true"></image>
		<view class="goods-info" id="demo1">
			<text class="good-name">{{goodInfo.title}}</text>
			<!-- <view> -->
				<!-- <text>{{goodInfo.remark}}</text> -->
			<text style="color: red; margin-top: 20upx;">{{'￥'+ goodInfo.servicePrice}}</text>
			<!-- </view> -->
			<view style="height: 1upx; background-color: #BEBEBE;width: 90%;margin-top: 20upx;"></view>
		</view>
		<view class="good-select">
			<view style="flex-direction: row;">
				<text style="color: #666666;">选择</text>
				<text style="margin-left: 20upx;">{{goodInfo.title}}</text>
			</view>
			<view style="display: flex; flex-direction: row;align-items: center;" @tap="toggleSpec">
				<text>请选择项目</text>
				<image style="width: 60upx; height: 60upx;" src="../../static/img/home/detail_more.png"></image>
			</view>
			
		</view>
		<!-- <view :animation="animationData" style="background:red;height:100rpx;width:100rpx" :style="{height: viewH + 'px' }"></view> -->
		<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scroll="scroll">
			<image class="img-list" v-for="(item,index) in goodInfo.serviceDescList" :id="index" :src="item.imgUrl" :key="index" :style="{height:item.height}" lazy-load="true" @load="imgInfo"></image>
		</scroll-view>
		<!-- 底部立即购买 -->
		<view class="page-bottom">
			 <button type="primary">立即购买</button>
		</view>
		<!-- 规格-模态层弹窗 -->
		<view class="popup"
		 :class="specClass"
		  @touchmove.stop.prevent="stopPrevent"
		  @click="toggleSpec">
			<!-- 遮罩层 -->
			<view class="mask"></view>
			<!-- 规格选择 -->
			<view class="layer attr-content"  @click.stop="stopPrevent">
				<view class="a-t">
					<image :src="goodInfo.cover"></image>
					<view class="right">
						<text>￥328.00</text>
						<text>库存：188件</text>
						<text>已选：xs白色</text>
					</view>
				</view>
				<text>尺寸</text>
				<view class="select-size">
					<text>XS</text>
					<text>S</text>
					<text>M</text>
				</view>
				<text>颜色</text>
				<view class="select-color">
					<text>白色</text>
					<text>珊瑚粉</text>
					<text>黑色</text>
				</view>
				<button>完成</button>
			</view>
			
		</view>
		
	</view>
</template>

<script>
	export default {
		data(){
			return{
				goodInfo:{},
				specClass: 'none',
				sizeStyle:'',
			}
		},
		onShow (){
			// debugger;
			var animation = uni.createAnimation({
			      duration: 5000,
			      timingFunction: 'ease',
				  
					
			    })
			
			    this.animation = animation
			
			    // animation.scale(2,2).rotate(45).step()
				// setTimeout(()=>{
				// 	animation.height('419px').step()
				// 	this.animationData = animation.export()
				// },250);
				
			
			    // setTimeout(function() {
			    //   animation.translateX(300).step()
			    //   this.animationData = animation.export()
			    // }.bind(this), 1000)
		},
		onLoad (option) {
		    const goodsServiceId = option.goodsServiceId;
			// debugger;
			uni.request({
				url:'http://tt.tiantue.com/tiantue/public/service/getServiceInfoDetail',
				data:{
					goodsServiceId:goodsServiceId,
				},
				success: (result) => {
					console.log(result);
					this.goodInfo = result.data.data;
					let imginfo = result.data.data.serviceDescList;
					var imgInfoList = [];
					for (var value of imginfo) {
						var item = {
							imgUrl:value,
							height:'900upx'
						}
						imgInfoList.push(item);
					}
					// debugger;
					this.goodInfo.serviceDescList = imgInfoList;
				},
				fail: (err) => {
					
				}
			})
		},
		// 注意：要在元素渲染出来才能获取元素的高度
		 mounted(){
		    this.$nextTick(()=>{ // 页面渲染完成后的回调
				// this.getElSize("size-info");
				// this.getElSize("goods-info");
		    })
			
		},
		methods:{
			// 图片加载完成，计算图片高度并缓存
			imgInfo(e){			
					let index = e.currentTarget.id;
					console.log(index);
					if(index.length<1){
						index = 0;
					}
					const imgHeight = e.detail.height;
					const imgWidth = e.detail.width;
					const topImgH = 750*imgHeight/imgWidth;
					
					// console.log("-------"+this.topImgH+"============");
					let item = this.goodInfo.serviceDescList[index];
					// debugger;
					item.height = topImgH + 'upx'
				
			},
			//规格弹窗开关
			toggleSpec() {
				if(this.specClass === 'show'){
					this.specClass = 'hide';
					setTimeout(() => {
						this.specClass = 'none';
					}, 250);
				}else if(this.specClass === 'none'){
					this.specClass = 'show';
				}
			},
			stopPrevent(){},

			//获取元素大小
			/*
			uni.getSystemInfo({
			　　success: function(res) { // res - 各种参数
			　　   console.log(res.windowWidth); // 屏幕的宽度 
			
			　　    let info = uni.createSelectorQuery().select(".类名");
			　　　  　info.boundingClientRect(function(data) { //data - 各种参数
			　　　  　console.log(data.width)  // 获取元素宽度
			　　    }).exec()
			       }
			});
			*/
			getElSize(className){
				let info = uni.createSelectorQuery().select("."+className);
		　　　  　info.boundingClientRect(function(data) { //data - 各种参数
		　　　  　console.log(data.width)  // 获取元素宽度
				debugger;
				return data;
		　　    }).exec()
			}
			
		}
	}
</script>

<style  lang='scss'>
	/* .detail-page{
		display: flex;
	} */
	.top-image{
		width: 750upx;
		height: 520upx;
	}
	.scroll-Y{
		
	}
	.img-list{
		width: 750upx;
	}
	.goods-info{
		display: flex;
		flex-direction: column;
		margin: 20upx 8upx 8upx 8upx;
		
	}
	.good-select{
		display: flex;
		margin: 0upx 8upx 0upx 8upx;
		height: 80upx;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
	
	.page-bottom{
		position: fixed;
		left: 30upx;
		right: 30upx;
		bottom:30upx;
		z-index: 95;
	}
	/* 规格选择弹窗 */
	.attr-content{
		padding: 10upx 30upx;
		.a-t{
			display: flex;
			image{
				width: 170upx;
				height: 170upx;
				flex-shrink: 0;
				margin-top: -40upx;
				border-radius: 8upx;;
			}
			.right{
				display: flex;
				flex-direction: column;
				padding-left: 24upx;
				/* font-size: $font-sm + 2upx; */
				/* color: $font-color-base; */
				line-height: 42upx;
				.price{
					/* font-size: $font-lg; */
					/* color: $uni-color-primary; */
					margin-bottom: 10upx;
				}
				/* .selected-text{
					margin-right: 10upx;
				} */
			}
		}
		.select-size{
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			text{
				display: flex;
				align-items: center;
				justify-content: center;
				background: #eee;
				margin-right: 20upx;
				margin-bottom: 20upx;
				border-radius: 100upx;
				min-width: 60upx;
				height: 60upx;
				padding: 0 20upx;
				/* font-size: $font-base; */
				/* color: $font-color-dark; */
			}
			
		}
		.select-color{
			padding: 20upx 0 0;
			display: flex;
			flex-wrap: wrap;
			text{
				display: flex;
				align-items: center;
				justify-content: center;
				background: #eee;
				margin-right: 20upx;
				margin-bottom: 20upx;
				border-radius: 100upx;
				min-width: 60upx;
				height: 60upx;
				padding: 0 20upx;
				/* font-size: $font-base; */
				/* color: $font-color-dark; */
			}
			/* .selected{
				background: #fbebee;
				color: $uni-color-primary;
			} */
		}
	}
	
	/*  弹出层 */
	.popup {
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: 99;
		
		&.show {
			display: block;
			.mask{
				animation: showPopup 0.2s linear both;
			}
			.layer {
				animation: showLayer 0.2s linear both;
			}
		}
		&.hide {
			.mask{
				animation: hidePopup 0.2s linear both;
			}
			.layer {
				animation: hideLayer 0.2s linear both;
			}
		}
		&.none {
			display: none;
		}
		.mask{
			position: fixed;
			top: 0;
			width: 100%;
			height: 100%;
			z-index: 1;
			background-color: rgba(0, 0, 0, 0.4);
		}
		.layer {
			position: fixed;
			z-index: 99;
			bottom: 0;
			width: 100%;
			min-height: 40vh;
			border-radius: 10upx 10upx 0 0;
			background-color: #fff;
			.btn{
				height: 66upx;
				line-height: 66upx;
				border-radius: 100upx;
				background: $uni-color-primary;
				/* font-size: $font-base + 2upx; */
				color: #fff;
				margin: 30upx auto 20upx;
			}
		}
		@keyframes showPopup {
			0% {
				opacity: 0;
			}
			100% {
				opacity: 1;
			}
		}
		@keyframes hidePopup {
			0% {
				opacity: 1;
			}
			100% {
				opacity: 0;
			}
		}
		@keyframes showLayer {
			0% {
				transform: translateY(120%);
			}
			100% {
				transform: translateY(0%);
			}
		}
		@keyframes hideLayer {
			0% {
				transform: translateY(0);
			}
			100% {
				transform: translateY(120%);
			}
		}
	}
</style>
